<template>
	<view class="list-container">
		<view id="wf-list" class="list" v-for="(list,listIndex) of viewList" :key="listIndex">
			<view class="item" v-for="(item,index) of list.list" :key="index" @click="handler(item.id)">
				<view class="post_r">
					<image @load="handleViewRender(listIndex,index)" @error="handleViewRender(listIndex,index)" lazy-load :src="item.imgs[0]||'https://bigdataapi.parkic.com/static/images/2232.jpg'" mode="widthFix"></image>
					<view class="post_a">{{item.city_names}}</view>
					<view class="post_a_top" :class="item.status==3?'end':'start'">{{item.status==3?'已结束':item.status==1?'待处理':'已处理'}}</view>
				</view>
				<view class="desc"><text class="orange">【{{item.type_id==1?'投资':item.type_id==2?'合作':item.type_id==3?'供需':'投诉'}}】</text> {{item.desc.length>12?item.desc.substring(0,12)+'...':item.desc}}</view>
				<view class="info">
					<view class="flex" >
						<image :src="item.avatar" mode=""></image>
						<view class="name">{{item.nickname}}</view>
					</view>
					<view class="time">{{item.create_time}}</view>
				</view>
				<view class="num_flex">
					<view class="num">
						<!-- <image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/list_read.png" mode=""></image> -->
						<view class="">阅读： {{item.read_num}}</view>
					</view>
					<view class="num">
						<!-- <image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/list_pl.png" mode=""></image> -->
						<view class="">评论：{{item.comment_num}}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array, //实际请求获取的列表数据
			}
		},
		data() {
			return {
				viewList:[{list:[]},{list:[]}],  //展示到视图的列表数据
				everyNum:2
			}
		},
		methods: {
			init(){
				this.viewList = [{list:[]},{list:[]}];
				setTimeout(()=>{
						this.handleViewRender(0,0)
				},0)
			},
			handleViewRender(x,y){
				const index = this.viewList.reduce((total,current)=>total + current.list.length,0)
				if(index>this.list.length-1) {
						// 加载完成触发事件并返回加载过的图片数
						this.$emit('finishLoad',index)
						return
				};
				const query = uni.createSelectorQuery().in(this);
				let listFlag = 0;
				query.selectAll('#wf-list').boundingClientRect(data => {
						listFlag = data[0].bottom - data[1].bottom<=0?0:1;
						this.viewList[listFlag].list.push(this.list[index])
				}).exec()
			},
			handler(id){
				this.$emit('selected',id)
			}
		},
		mounted() {
		
		}
}
</script>

<style lang="scss" scoped>
.num_flex{
	display: flex;
	justify-content: space-between;
	margin: 5px 0;
	.num{
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #444;
		// margin-right: 20px;
		image{
			width: 16px !important; 
			height: 16px !important;
			margin-right: 4px;
		}
	}
}
.flex{
	display: flex;
	align-items: center;
}
.info{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 5px;
	margin-bottom: 5px;
	image{
		width: 28px !important;
		height: 28px;
		// background-color: #ff9933;
		border-radius: 14px !important;
		margin-right: 6px;
	}
	.name{
		font-size: 14px;
		color: #333;
		width: 60px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.time{
		font-size: 12px;
		color: #888;
	}
}
.list-container{
	display:flex;
	justify-content: space-between;
	align-items:flex-start;
	padding:0 24rpx;
	padding-top:30rpx;
	.list{
		width:calc(50% - 12rpx);
		display:flex;
		flex-direction:column;
		.item{
			margin-bottom:18rpx;
			box-shadow: 0 0 4px 0 rgba($color: #000000, $alpha: .3);
			padding: 5px;
			border-radius: 5px;
			image{
					width:100%;
					border-radius: 14rpx;
			}
			.desc{
				font-size:28rpx;
			}
			.orange{
				color: #FA6400;
			}
		}
	}
	.post_r{
		position: relative;
	}
	.post_a{
		position: absolute;
		width: 100%;
		border-radius: 0 0 14rpx 14rpx;
		bottom: 8rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 14px;
		background-color: rgba(0,0,0,0.4);
		text-align: left;	
		color: #fff;
	}
	.post_a_top{
		position: absolute;
		border-radius: 8rpx;
		top: 30rpx;
		left: -10rpx;
		width: 52px;
		height: 22px;
		line-height: 22px;
		font-size: 14px;
		text-align: center;	
		color: #fff;
	}
	.end{
		background-color: #F4F4F4;
		color: #8D92A3;
	}
	.start{
		background-color: #FF5100;
	}
}
</style>